import React, { Component } from 'react';
import { } from '../../stores/ComponentStore';
import { Icon } from 'antd';
import './Collapse.scss';

interface PanelProps {
    title: string;
    canBeHidden: boolean;
}

export default class Collapse extends Component {
    render(): JSX.Element {
        const panelList = this.props.children!;
        return (
            <div>
                {
                    panelList
                }
            </div>
        );
    }
}
export class Panel extends Component<PanelProps> {
    state = {
        activeFlag: false
    };
    handleClick = () => {
        this.setState({ activeFlag: !this.state.activeFlag });
    }
    render(): JSX.Element {
        const { title, canBeHidden } = this.props;
        const content = this.props.children!;
        return (
            <div>

                <header
                    onClick={
                        () => {
                            this.handleClick();
                        }
                    }
                    style={{ fontSize: '15px', color: '#0097A7' }}
                >
                    {
                        !this.state.activeFlag ? <Icon type="caret-right" /> : <Icon type="caret-down" />
                    } {title}
                </header>

                {
                    this.state.activeFlag ?
                        (
                            <div>
                                {
                                    content
                                }
                                {

                                    canBeHidden ?
                                        <div
                                            className="hidden-btn"
                                            onClick={() => { this.handleClick(); }}
                                        >
                                            收起
                                        </div>
                                        : null
                                }
                            </div>
                        )
                        : null
                }
            </div>
        );
    }
}